<template>
  <div :id="eId" style="width: 100%; height: 100%"></div>
</template>

<script>
import * as echarts from 'echarts'

export default {
  name: 'LineEchartxy',
  props: {
    dataSource: {
      type: Object,
      default() {
        return {
          data: [
            [120, 132, 101, 134, 90, 230, 210],
            [220, 182, 191, 234, 290, 330, 310],
          ],
          legend: ['能耗', '费用'],
          xAxis: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        }
      },
    },
    eId: {
      type: String,
      default() {
        return 'linexy'
      },
    },
  },
  data() {
    return {
      myChart: null,
    }
  },
  computed: {},
  mounted() {
    this.init()
    // window.onresize = () => {
    //   myChart.resize()
    // }
  },
  methods: {
    init() {
      this.myChart = echarts.init(document.getElementById(this.eId))
      var option = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,.6)',
          formatter: (params) => {
            var result ="<span style='color:#ccc;font-size:12px;font-family:Microsoft YaHei'>"+ params[0].name+"</span><br/>"
            params.forEach((item, i) => {
              result += item.marker + ' <span style="color:#fff;font-size:12px;font-family:Microsoft YaHei">' + item.seriesName + ' : ' + item.value + (i == 0 ? 'm³' : '元') + '</span><br/>'
            })
            return result
          },
          // "{b}<br/>{a0}：{c0}m³<br/>{a1}：{c1}元"
        },
        legend: {
          icon: 'none',
          left: 'left',
          itemWidth: 0,
          itemGap: -5,
          selectorItemGap: 0,
          padding: 0,
          textStyle: {
            borderWidth: 1,
            borderColor: '#fff',
            borderType: 'solid',
            padding: [5, 20],
            lineHeight:20,
          },
          data: this.dataSource.legend.map((item, i) => {
            return {
              name: item,
              textStyle: {
                borderRadius: [
                  i == 0 ? 6 : 0,
                  i == this.dataSource.legend.length - 1 ? 6 : 0,
                  i == this.dataSource.legend.length - 1 ? 6 : 0,
                  i == 0 ? 6 : 0,
                ],

                color: i == 0 ? '#4ad2e7' : '#2db7f5',
              },
            }
          }),
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '2%',
          containLabel: true,
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ebebeb',
            },
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
          },
          data: this.dataSource.xAxis,
        },
        yAxis: {
          type: 'value',
          axisLine: {
            show: true,
            lineStyle: {
              color: '#ebebeb',
            },
          },
          axisLabel: {
            color: '#666',
            fontSize: 12,
            fontFamily: 'Microsoft YaHei',
          },
          axisTick: {
            show: false,
          },
          splitLine: {
            show: false,
          },
        },
        series: [
          {
            name:this.dataSource.legend[0],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color: '#4ad2e7',
            },
            data: this.dataSource.data[0],
          },
          {
            name: this.dataSource.legend[1],
            type: 'line',
            showSymbol: false,
            itemStyle: {
              color: '#2db7f5',
            },
            data: this.dataSource.data[1],
          },
        ],
      }

      option && this.myChart.setOption(option)
      let that = this
      setTimeout(() => {
        that.myChart.resize()
      }, 200)
      window.addEventListener('resize', () => {
        setTimeout(() => {
          that.myChart.resize()
        }, 200)
      })
    },
  },
  watch:{
    dataSource(){
      this.init();
    },
  }
}
</script>